<template>
  <div class="system-user-dialog-container">
    <el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="500px">
      <el-form ref="userDialogFormRef" :model="state.ruleForm" size="default" label-width="90px">
        <el-form-item label="标题">
          <el-input v-model="state.ruleForm.title" placeholder="请输入标题" clearable></el-input>
        </el-form-item>


        <el-form-item label="描述">
          <el-input v-model="state.ruleForm.desc" type="textarea" placeholder="请输入描述"
                    :autosize="true"
                    maxlength="150"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="state.ruleForm.order"
          placeholder="请输入排序"
          ></el-input>
        </el-form-item>
        <el-form-item label="图片">
          <el-upload
              class="avatar-uploader"
              :limit="1"
              :on-change="handleChange"
              :on-exceed="handleExceed"
              :file-list="state.fileList"
              :auto-upload="false"
              list-type="picture-card">
            <el-icon>
              <Plus/>
            </el-icon>
          </el-upload>

        </el-form-item>
      </el-form>
      <template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
				</span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="systemUserDialog">
import {reactive, ref} from "vue";
import {updateHomeInfo, uploadHomeInfo} from "/@/views/edithome/edithome";
import {ElMessage, UploadInstance, UploadProps, UploadRawFile} from "element-plus";
import {Plus} from "@element-plus/icons-vue";
import qiniu from "/@/utils/qiniu.js";
import {uploadAchievement} from "/@/views/achievement/achievement";
// 定义子组件向父组件传值/事件
const emit = defineEmits(["refresh"]);

const handleChange = (file) => {
  qiniu(file).then((res) => {
    state.ruleForm.cover = "http://img.pzhuweb.cn/" + res.key;
  });
  return false;
};
const handleExceed: UploadProps["onExceed"] = (files) => {
  ElMessage({
    message: `只上传1张照片`,
    type: "error"
  });
};

// 定义变量内容
const userDialogFormRef = ref();
const state = reactive({
  ruleForm: {
    id: "",
    title: "",
    order:"",
    desc: "",
    cover: "",
  },
  fileList: [], // 上传文件列表
  dialog: {
    isShowDialog: false,
    type: "",
    title: "",
    submitTxt: ""
  }
});
// 打开弹窗
const openDialog = (type: string, row: any) => {

  state.ruleForm = {
    id: "",
    title: "",
    order:"",
    desc: "",
    cover: "",
  };
  state.fileList = [];
  if (type === "edit") {
    state.dialog.type = "edit";
    state.ruleForm.id = row.id;
    state.ruleForm.title = row.title;
    state.ruleForm.desc = row.desc;
    state.ruleForm.order = row.order;
    state.ruleForm.cover = row.cover;
    state.fileList = [{url: row.cover}];
    state.dialog.title = "修改主页";
    state.dialog.submitTxt = "修 改";
  } else {
    state.dialog.type = "add";
    state.dialog.title = "新增主页";
    state.dialog.submitTxt = "新 增";
    // 清空表单，此项需加表单验证才能使用
    // nextTick(() => {
    // 	userDialogFormRef.value.resetFields();
    // });
  }

  state.dialog.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
  state.dialog.isShowDialog = false;
};
// 取消
const onCancel = () => {
  closeDialog();
};
// 提交
const onSubmit = () => {
  closeDialog();
  if (state.dialog.type === "edit") {
    updateHomeInfo(state.ruleForm).then((res) => {
      emit("refresh");
    });
  } else if (state.dialog.type === "add") {
    uploadHomeInfo(state.ruleForm).then((res) => {
      emit("refresh");
    })
  }
};

// 暴露变量
defineExpose({
  openDialog
});
</script>
